<template>
    <div>
        <p>
            <router-link to="/demo02">demo02</router-link>
        </p>
        <h3>点击变大消失的泡泡</h3>
        <svg width="600" height="400" id="sll" @click="cll"></svg>
        <h3>表单控件模块的练习1</h3>
        <label> <input type="radio" value="male" v-model="gender">男</label>
        <label> <input type="radio" value="female" v-model="gender">女</label>
        <p>{{ gender }}</p>
        <h3>表单控件模块的练习2</h3>
        <select v-model="selected">
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>
        <span>Selected:{{ selected }}</span>
        <h3>v-for模块的练习，vue1.0:n从0开始，vue2.0:n从1开始</h3>
        <ul>
            <li v-for="n in 23">{{n}}</li>
        </ul>
    </div>
</template>
<script>
    export default {
      data () {
        return {
          gender: '性别',
          selected: '',
          n: ''
        }
      },
      methods: {
        cll () {
          let that = this
          that.onclick = null
          setInterval(
            () => {
              let r = that.getAttribute('r')
              r *= 1.1
              that.setAttribute('r', r)
              let o = that.getAttribute('fill-opacity')
              o *= 0.9
              that.setAttribute('fill-opacity', o)
              if (o <= 0.001) {
                this.removeChild(that)
              }
            }, 40)
        }
      }
    }
</script>
<style>
    li {
      list-style: none;
    }
</style>
